<style lang="scss" scoped>
  .chart{
    #mapChart{
      width: 100%;
      height: 900px;
    }
  }

</style>
<template>
  <div :class="className" :style="{height:height,width:width}">

    <div class="white text-center" :style="{'width':'100%','fontSize':'24px'}">
      Vue + Echarts 实现中国地图多级钻取功能
    </div>

    <div id="mapChart" class="mapChart"></div>

    <!-- <div class="mapChoose">
      <span v-for="(item,index) in selectedMaps" :key="item.code">
        <span class="title" @click="chooseMap(item,index)">{{item.name == 'china' ? '全国' : item.name}}</span>
        <span class="icon" v-show="index + 1 != selectedMaps.length">></span>
      </span>
    </div> -->

  </div>
</template>

<script>
import axios from "axios";
import Echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme 
import 'echarts/map/js/china.js'; // 引入中国地图数据（重中之重！！！）
import resize from './mixins/resize'; // echarts 尺寸重置
import { mapCode } from './components/mapCode.js';

// const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String, default: 'chart'
    },
    width: {
      type: String, default: '100%'
    },
    height: {
      type: String, default: '300px'
    }
  },
  data() {
    return {
      myChart: null,
      // chinaCode: 100000,
      // curMapName:'china', // 当前地图名
      // selectedMaps:[
      //   { name:'china', code:'100000' }
      // ],

      chinaCode: 340000,
      curMapName:'anhui', // 当前地图名
      selectedMaps:[
        { name:'anhui', code:'340000' }
      ],
    }
  },
  created(){
    console.log('mapCode', mapCode)
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart()
      this.getMapData(this.chinaCode);
    })
  },
  beforeDestroy() {
    if (!this.myChart)  return
    this.myChart.dispose()
    this.myChart = null
  },
  methods: {
    // step 0: 获取地图数据
    getMapData(map){
      axios.get(`/json/map/${map}.json`).then((res) => {
        if(res.status == 200){
          const mapJSON = res.data;
          this.drawMapChart(this.curMapName, mapJSON);
        } 
      }).catch((err) => {
        this.$message({message: err,type: 'error',showClose: true});
      })
    },
    initMapData(mapJson) {
      let mapData = [];
      for (let i = 0; i < mapJson.features.length; i++) {
        mapData.push({ name: mapJson.features[i].properties.name });
      }
      console.log('initMapData', mapData)
      return mapData;
    },


    // step 1: 绘制地图 // 绿色：#67C23A
    drawMapChart(mapName, mapJSON){
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose();
      }
      this.myChart = Echarts.init(document.getElementById('mapChart'));
      Echarts.registerMap(mapName, mapJSON);
      this.myChart.setOption({
        series: [
          {
            type: 'map',
            map: mapName,
            roam: true,  // 是否开启鼠标缩放和平移漫游
            selectedMode: 'false', // 是否允许选中多个区域
            label:{
              show: true, color:'#a8e6e1', // 未获取焦点时，地图文字颜色
            },
            emphasis:{
              label:{ 
                show:true, color:'#fff', // 获取焦点时，地图文字颜色
              }
            },
            itemStyle: { 
              normal: { // 常规地图样式：未获取焦点时
                areaColor: "rgba(23, 27, 57, 0)", // 未获取焦点时，地图背景色
                borderColor: "#1dc199", // 地图边界颜色
                borderWidth: 1, // 地图边界宽度
              }
            },
            data: this.initMapData(mapJSON),
          }
        ]
      });

      this.myChart.on('click', (params) => {
        const map = mapCode[params.name];
        if(map){
          this.curMapName = params.name;
          this.getMapData(map);

          // 为地图标题菜单存入（过滤同一地图多次点击情况）点击地图信息
          let selectedCodes = [];
          this.selectedMaps.forEach( item => selectedCodes.push(item.code));
          if(!selectedCodes.includes(map)){
            this.$set(this.selectedMaps,this.selectedMaps.length,{name: this.curMapName, code: map}); 
          }
          console.log(selectedCodes)
          
        }else{
          this.$message({message: '暂无地图数据',type: 'warning',showClose: true});
        }
      });
    },

    // 获取地图数据


  }
}
</script>
